<!--
 * @Author: wang_sheshe
 * @Date: 2021-05-21 18:39:18
 * @LastEditTime: 2021-07-13 21:43:46
 * @Description: 作业卡页面
-->
<template>
    <div id="workCardPage">
        <van-nav-bar title="查看巡视作业卡" left-arrow fixed @click-left="back" fixed>
            <template slot="right">
                <div class="parent-circle">
					<div class="child-circle"></div>
				</div>
            </template>
        </van-nav-bar>
        
        <van-cell class="content-title" :border="false" title="巡视作业卡列表" value="">
            <template slot="title">
                <span class="border-icon"></span>
                <span>巡视作业卡列表</span>
            </template>
        </van-cell>

        <div class="content">
            <div v-for="(pro,index) in dataList" :key="index">
                <p class="nav_p" style="border-radius: 5px 5px 0px 0px;">{{pro.tourObject}}</p>
                <ul>
                    <li v-for="(step,i) in pro.cardStep" :key="i" style="position: relative;" @click="registBtn(index,i)">
                        {{step.name}}
                        <div v-if="step.checked" class="registB">
                            <van-button  type="default"
                            size="mini"  @click="registDefect(index,i)">登记缺陷</van-button>
                            <van-button type="default"
                            size="mini"  @click="registHidden(index,i)">登记隐患</van-button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <van-row class="btn-wrapper" style="text-align: center;">
            <van-button type="default" size="small" class="c" @click="confirm">取消</van-button>
            <van-button type="primary" style=" background: rgb(23, 180, 155) !important;" size="small" class="c" @click="confirm">保存</van-button>
        </van-row>
    </div>
</template>
<script type="text/javascript">
import {queryWorkCard} from '../../api/tourTask';
export default {
    name: "copyMenu",
    components: {
       
    },
    data() {
        return {
            dataList: [],//作业卡信息
            icon: {
                screen: require("@/assets/firePro/creen.svg")
            },
            deviceId: "",//设备id
            patrolTypeName:"",//巡视类型
            taskInfo:{},
            deviceInfo: {},
        }            
    },
    computed: {
      
    },
    methods: {
        /**
         * 返回
         */
        back(){
            this.$router.push({
                name:"executeIndex",
                params: {
                    taskInfo: this.taskInfo
                }
            })
        },
        confirm() {
            this.$router.push({
                name:"executeIndex",
                params: {
                    taskInfo: this.taskInfo
                }
            })
        },
        /**
         * @description: 查询巡视作业卡
         * @param {*}
         * @return {*}
         */
        queryWorkCard() {
            var self = this;
            this.$Toast.loading({
                duration: 0,//展示时长 0不会消失
                message: "作业卡信息查询中...",
                forbidClick: true,//是否禁止背景点击
                overlay: true//是否显示背景遮罩层
            })
            var params = {
                // deviceId: this.deviceId,//设备id
                // patrolTypeName: this.patrolTypeName,//巡视类型名称
                deviceId: "0c729ae97a8a06deec51daed5401520c72695e4517",//设备id
                patrolTypeName: "全面巡视",//巡视类型名称
            }
            //编辑页面
            queryWorkCard(params).then(data => {
                self.$Toast.clear();
                if(data.success) {
                    self.$Toast.success(data.msg)
                    if(data.data && data.data.length > 0) {
                        data.data.forEach(item => {
                            var cardStep = [];
                            item.tourContent.forEach(arr => {
                                cardStep.push({
                                    name: arr,
                                    checked: false,
                                })
                            })
                            item["cardStep"] = cardStep;
                        }) 
                        self.dataList = data.data;
                        console.log(self.dataList)
                    }else{
                        self.dataList = [];
                    }
                }else{
                    self.$Toast.fail(data.msg)
                }
            }).catch(err => {
                self.$Toast.clear();
                self.$Toast.fail(err)
            })
        },
        /**
         * @description: 显示d登记缺陷按钮
         * @param {*}
         * @return {*}
         */
        registBtn(index,i) {
            this.dataList[index].cardStep[i].checked = !this.dataList[index].cardStep[i].checked;
        },
        /**
         * @description: 登记缺陷
         * @param {*}
         * @return {*}
         */
        registDefect(index,i) {
            var stepName = this.dataList[index].cardStep[i].name;
            this.$router.push({
                path: '/AddDefect',
                query: {
                    params: {
                        taskInfo:this.taskInfo,
                        subId:this.taskInfo.substationId,
                        subName:this.taskInfo.substationName,
                        deviceInfo:this.deviceInfo
                    }
                }
            })
        },
        /**
         * @description: 登记隐患
         * @param {*}
         * @return {*}
         */
        registHidden() {
            this.$router.push({
                path: '/AddHiddenDanger',
                query: {
                    taskInfo: this.taskInfo,
					deviceInfo:this.deviceInfo
                }
            })
        }
    },
    mounted() {
     
    },
    created(){
        this.deviceId = this.$route.query.deviceId;
        this.taskInfo = this.$route.query.taskInfo;
        this.patrolTypeName = this.$route.query.patrolTypeName;
        this.deviceInfo = this.$route.query.deviceInfo;
        this.queryWorkCard();//查询巡视作业卡
    }
}
</script>
<style scoped>
#workCardPage {
    width: 100%;
    height: 100%;   
    background: #fff;
    margin-bottom: 30px;
}
#workCardPage /deep/ .van-nav-bar__title{
  font-size: 1.125rem;
}
#workCardPage .van-nav-bar{
    background: #17B49B;
    color: #fff;
}
#workCardPage /deep/ .van-nav-bar .van-nav-bar__content .van-icon{
    color: #fff;
}
#workCardPage /deep/ .van-nav-bar .van-nav-bar__title{
    color: #fff;
}
#workCardPage .content{
    background: #fff;
    
}
#workCardPage .van-cell-group{
    background: #FAFAFA;
}
.content-title{
    margin-top: 50px;
}
.content-title .van-cell__title{
    font-size: 1.125rem;
    color: #333;
}
.content-title .van-cell__value{
    font-size: 0.75rem;
    color: #999;
}
.border-icon{
    width: 2px;
    height: 15px;
    border-radius: 10px;
    display: inline-block;
    background:#3CDAA8;
}
.content{
    overflow: auto;
    height: calc(100% - 140px);
    margin-top: 10px;
    margin-right: 15px;
    margin-left: 15px;
    box-sizing: border-box;
}
.content ul{
  width: 100%;
  font-size: 0.875rem;
  color: #000000;
  font-weight: 300;
}
.content ul li{
    color: #666;
  line-height: 28px;
  padding: 5px 15px;
  border-bottom: 1px solid #f4f4f4;
}
.nav_p{
    background: rgb(23, 180, 155) !important;
    color: white;
    height: 35px;
    line-height: 35px;
    border-radius: 5px 5px 0px 0px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 1rem;
    margin: 0;
    padding-left: 15px;
}
.van-button{
    width: 100px;
    height: 30px;
    border-radius: 5px;
    margin-right: 30px;
}
.registB{
    width: 100%;
    position: relative;
    z-index: 50;
    background: #fff;
}
.registB /deep/ .van-button{
    color: #07c160;
    width:47%;
    margin-right: 0px;
    background: #FAFAFA;
}
</style>